import React, { Component } from 'react'
import { Row, Col } from 'antd'
import { connect } from 'react-redux'
import '../../../less/index.less'
import Menu from '../../common/menu/vertical-menu'
import UrlPattern from 'url-pattern'
import * as programActions from '../../../actions/program'
import { TwsReactMarkdownPreview } from 'tws-antd'
import {getLangFromLocalStorage} from '../../../constant/lang-util'

class programIntroduction extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 1
    }
  }

  componentDidMount () {
    const pattern = new UrlPattern('/program/:programId/introduction')
    const urlParams = pattern.match(this.props.location.pathname) || {}

    this.setState({
      programId: urlParams.programId
    }, () => {
      this.props.getProgram(this.state.programId)
    })
  }

  render () {
    const {programInfo} = this.props
    const isShowIntegration = programInfo.isShowIntegration
    const introduction = programInfo[`introduction_${getLangFromLocalStorage()}`] ||
      programInfo.introduction
    return (
      <Row>
        <Col span={5}>
          <Menu isShowIntegration={isShowIntegration} />
        </Col>
        <Col span={19}>
          <div className='mark-down-wrap'>
            <TwsReactMarkdownPreview source={introduction} />
          </div>
        </Col>
      </Row>)
  }
}

const mapStateToProps = state => ({
  programInfo: state.program,
  lang: state.lang
})
const mapDispatchToProps = dispatch => ({
  getProgram: (programId) => dispatch(programActions.getProgramIntroduction(programId))
})
export default connect(mapStateToProps, mapDispatchToProps)(programIntroduction)
